/* ==========================================================================
   Grid Fieldtype
   ========================================================================== */

.grid-table {
    @apply w-full rtl:text-right ltr:text-left border dark:border-dark-900 text-gray dark:text-dark-150 relative mb-4 outline-none shadow-sm rounded;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.grid-table thead {
    th {
        @apply font-medium px-2 py-2 border-b dark:border-dark-900 z-10 bg-gray-200 dark:bg-dark-650 text-gray-900 dark:text-dark-150 text-sm;
        display: table-cell;
        position: sticky;
        top: -1px;
        z-index: auto;

        &:first-child { @apply rtl:rounded-tr ltr:rounded-tl rtl:pr-3 ltr:pl-3; }
        &:last-child { @apply rtl:rounded-tl ltr:rounded-tr; }
        &.grid-drag-handle-header {
            @apply w-3;
        }
    }
}

.stack-container .grid-table thead th {
    top: auto;
}

.grid-table > tbody {
    @apply outline-none;

    > tr {
        @apply outline-none;
    }

    > tr > td {
        @apply border-b dark:border-dark-900 px-2 py-3 align-top;

        &:first-child.grid-cell {
            @apply rtl:pr-3 ltr:pl-3;
        }

        &.drag-handle {
            @apply rtl:border-l ltr:border-r h-full p-2;
            width: 1%;
            cursor: grab;
            background: theme('colors.gray.200') url('../../../svg/icons/light/drag-dots.svg') center center no-repeat;
            background-size: 7px 17px;
            &:hover { @apply bg-gray-300; }

            .dark & {
                background-color: theme('colors.dark.700');
            }
        }
    }

    tr:last-child td {
        @apply border-b-0;
        &:first-child { @apply rtl:rounded-br ltr:rounded-bl; }
        &:last-child { @apply rtl:rounded-bl ltr:rounded-br; }
    }

    tr.draggable-source--is-dragging td {
        @apply bg-gray-100;
    }
}

.grid-table tbody .grid-row-controls {
    @apply rtl:pr-0 ltr:pl-0 text-center;
    width: 1%;
    padding-top: 21px; /*  pseudo-center for text/select fields */
}

.grid-item-header {
    @apply bg-gray-200 border-b px-4 py-2 text-sm flex items-center justify-between outline-none cursor-move;
}

.grid-fullscreen {
    @apply fixed bg-gray-200 inset-0 min-h-screen overflow-scroll rounded-none;
    z-index: 998; /*  to appear over the top of the rest of the stuff on the page. */
                /*  too high and it'll be over the top of stacks, etc. */
}
